<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">

    <base href="http://edu.bluej.cn/public/uploads/20180625/20180625095037ajax-neteasse/ajax-neteasse/"><br><title>网易云接口</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="stylesheet" type="text/css" href="css/table.css" />
</head>

<body>
	<style type="text/css">
		.table tbody td:first-child{
			cursor: pointer;
		}
	</style>
    <div id="div1" class="box box-re form-inline">
        <input type="text" class="form-control" id="keywords" placeholder="搜索歌曲" value="">
        
        <button class="btn btn-info content" id="send">搜索</button>
        
        <div style="margin: 10px 0;">
            <button class="btn btn-info content disable" id="prev">上一页</button>
            <button class="btn btn-info content disable" id="next">下一页</button>
        </div>

        <div>
            <audio id="player" src="" controls></audio>
        </div>

        <table class="table table-bordered">
            <thead>
                <td>音乐标题</td>
                <td>歌手</td>
                <td>专辑</td>
                <td>时长</td>
            </thead>
            <tbody>
            </tbody>
        </table>
        <script>
        	function ajax(method, url, dataObj, callback) {
				//1.创建xhr
				var xhr = new XMLHttpRequest();
				xhr.timeout = 5000;
				//2.创建url
				if(method.toUpperCase() == "GET") {
					if(!url.includes("?")) {
						url = url + "?";
					}
					//3.拼接请求参数
					if(dataObj && typeof dataObj == "object") {
						for(var key in dataObj) {
							url += `${key}=${dataObj[key]}&`
						}
					}
					url = url.slice(0, -1);
				}
			
				xhr.open(method, url);
				xhr.send(dataObj);
				xhr.addEventListener('readystatechange', function() {
					if(xhr.readyState == 4) {
						if(xhr.status == 200) {
							callback(xhr.response);
						}
					}
				})
			
			}
        </script>
        <script type="text/javascript">
        	//定义一个普通对象
        	//记录接口
        	var baseUrl = "https://netease.bluej.cn";
        	var api = {
        		search:baseUrl+"/search"
        	};
        	var audio={
        		el:document.getElementById("player"),
        		setSrc:function(src){
        			this.el.src = src;
        		},
        		play:function(){
        			this.el.play();
        		}
        	};
        	var muisc = {
        		songlist:"", //歌曲列表
        		offset:0,    
        		limit:10,
        		addOffset:function(){
        			return ++this.offset;
        		},
        		reduceOffset:function(){
        			return --this.offset;
        		},
        		template:function(ele,i){
        			var songlist = "";
        			ele.artists.forEach(function(item){
        				songlist+=item.name + " ";
        			})
        			return `<tr>
			        			<td data-index=${i}>${ele.name}</td>
			        			<td>${songlist.trim()}</td>
			        			<td>${ele.album.name}</td>
			        			<td>${ele.duration}</td>
        					</tr>`
        		},
        		render:function(res){
        			var tbody = document.querySelector(".table tbody")
        			var that = this;
        			var str=""
        			res.forEach(function(ele,index){
        				str+=that.template(ele,index);
        			})
        			tbody.innerHTML=str;
        		},
        		getKeywords:function(){
        			var keywords = document.getElementById("keywords");
        			return keywords.value;
        		},
        		search:function(){
        			var that = this;
        			var send = document.getElementById("send");
        			send.addEventListener("click",function(){
        				console.log(muisc.getKeywords());
        				var dataObj ={
        					keywords:that.getKeywords(),
        					offset:that.offset,
        					limit:that.limit
        				}
        				ajax("get",api.search,dataObj,function(res){
        					//传一个数组进去
        					var songs = JSON.parse(res).result.songs;
        					that.render(songs);
							that.songlist = songs;
        				})
        			})
        		}
        	};
        	
        	
        	
        	window.addEventListener("load",function(){
        		muisc.search();
        		var tbody = document.querySelector(".table tbody");
        		tbody.addEventListener("click",function(e){
        			var index = e.target.getAttribute("data-index");
        			if(index){
        				var id = muisc.songlist[index].id;
        				audio.setSrc(`https://music.163.com/song/media/outer/url?id=${id}.mp3`)
        				//尝试自动播放
        				audio.play();
        				
        				
        				
        			}
        		})
        	})
        	
        	
        	
        	
        </script>

</body>

</html>